<template>
  <div class="app-container">
    <div class="search">
      <el-form label-width="100px" :inline="true">
        <el-form-item label="合作商搜索:">
          <el-input v-model="search.name" clearable placeholder="请输入" />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            class="my-primary1"
            icon="el-icon-search"
            @click="query"
          >查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="result">
      <el-row type="flex" class="operation">
        <el-button
          type="primary"
          class="my-primary2"
          icon="el-icon-circle-plus-outline"
          @click="addPartner"
        >新建</el-button>
      </el-row>
      <el-table
        :data="tableData"
        style="width: 100%"
        empty-text="暂无数据"
        fit
        highlight-current-row
        :cell-style="{
          height: '44px',
          padding: '2px 0px',
          textAlign: 'left',
          color: 'rgb(102, 102, 102)',
          borderBottom: 'none',
        }"
        :header-cell-style="{
          lineHeight: 1.15,
          padding: '10px 0px 9px',
          background: 'rgb(243, 246, 251)',
          fontWeight: 500,
          textAlign: 'left',
          color: 'rgb(102, 102, 102)',
          borderBottom: 'none',
        }"
      >
        <el-table-column
          type="index"
          label="序号"
          width="80px"
        />
        <el-table-column prop="name" label="合作商名称" />
        <el-table-column prop="account" label="账号" />
        <el-table-column prop="vmCount" label="设备数量" />
        <el-table-column label="分成比例">
          <template v-slot="{row}">
            {{ row.ratio+'%' }}
          </template>
        </el-table-column>
        <el-table-column prop="contact" label="联系人" />
        <el-table-column prop="mobile" label="联系电话" />
        <el-table-column label="操作" width="250">
          <template v-slot="{ row }">
            <el-button type="text" class="el-button--primary-text" @click.native="resetPwd(row.id)">
              重置密码
            </el-button>
            <el-button type="text" class="el-button--primary-text" @click.native="showPartnerInfo(row)">
              查看详情
            </el-button>
            <el-button type="text" class="el-button--primary-text" @click.native="editPartner(row)">
              修改
            </el-button>
            <el-button type="text" class="el-button--danger-text" @click.native="delPartner(row.id)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          layout="slot,prev,next"
          :current-page.sync="search.pageIndex"
          :total="totalCount"
          :page-size="search.pageSize"
          prev-text="上一页"
          next-text="下一页"
          @current-change="partnerSearch"
        >
          <template order="-1">
            <span
              class="el-pagination__total"
            >共{{ totalCount }}条记录 第 {{ search.pageIndex }}/{{
              totalPage
            }}
              页</span>
          </template>
        </el-pagination>
      </div>
    </div>
    <el-dialog
      title="新增合作商"
      :visible.sync="addShowDialog"
      width="630px"
      top="15vh"
      @close="addClose"
    >
      <el-form
        ref="add"
        :model="addForm"
        :rules="addRules"
        label-width="140px"
        size="medium"
      >
        <el-form-item label="合作商名称：" prop="name">
          <el-input
            v-model="addForm.name"
            autocomplete="off"
            placeholder="请输入"
            style="width: 396px"
            maxlength="10"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="联系人：" prop="contact">
          <el-input
            v-model="addForm.contact"
            autocomplete="off"
            placeholder="请输入"
            style="width: 396px"
            maxlength="10"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="联系电话：" prop="phone">
          <el-input
            v-model="addForm.phone"
            autocomplete="off"
            placeholder="请输入"
            style="width: 396px"
            maxlength="11"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="分成比例(%)：" prop="ratio">
          <el-input-number
            v-model="addForm.ratio"
            controls-position="right"
            :min="0"
            :max="100"
            autocomplete="off"
            placeholder="请输入"
            style="width: 396px"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="账号：" prop="account">
          <el-input
            v-model="addForm.account"
            autocomplete="off"
            placeholder="请输入"
            style="width: 396px"
            maxlength="18"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="密码：" prop="password">
          <el-input
            v-model="addForm.password"
            autocomplete="off"
            placeholder="请输入"
            style="width: 396px"
            maxlength="20"
            show-word-limit
          />
        </el-form-item>
        <el-form-item>
          <el-row type="flex" justify="center">
            <el-col :span="16">
              <el-button class="my-secondary" @click="addClose">取消</el-button>
              <el-button
                type="primary"
                class="my-primary2"
                @click="addSubmit"
              >确认</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog
      title="修改合作商"
      :visible.sync="editDialog"
      width="630px"
      top="15vh"
      @close="addClose"
    >
      <el-form
        ref="edit"
        :model="editForm"
        :rules="addRules"
        label-width="140px"
        size="medium"
      >
        <el-form-item label="合作商名称：" prop="name">
          <el-input
            v-model="editForm.name"
            autocomplete="off"
            placeholder="请输入"
            style="width: 396px"
            maxlength="10"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="联系人：" prop="contact">
          <el-input
            v-model="editForm.contact"
            autocomplete="off"
            placeholder="请输入"
            style="width: 396px"
            maxlength="10"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="联系电话：" prop="mobile">
          <el-input
            v-model="editForm.mobile"
            autocomplete="off"
            placeholder="请输入"
            style="width: 396px"
            maxlength="11"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="分成比例(%)：" prop="ratio">
          <el-input-number
            v-model="editForm.ratio"
            controls-position="right"
            :min="0"
            :max="100"
            autocomplete="off"
            placeholder="请输入"
            style="width: 396px"
            maxlength="15"
            show-word-limit
          />
        </el-form-item>
        <el-form-item>
          <el-row type="flex" justify="center">
            <el-col :span="16">
              <el-button class="my-secondary" @click="addClose">取消</el-button>
              <el-button
                type="primary"
                class="my-primary2"
                @click="editSubmit"
              >确认</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog
      title="合作商详情"
      :visible.sync="partnerInfoDialog"
      width="630px"
      @close="partnerInfoClose"
    >
      <el-form :model="partnerInfo" label-width="140px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="合作商名称：">{{ partnerInfo.name }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人：">{{ partnerInfo.contact }}</el-form-item>

          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话：">{{ partnerInfo.mobile }}</el-form-item>

          </el-col>
          <el-col :span="12">
            <el-form-item label="分成比例：">
              <template>
                {{ partnerInfo.ratio+'%' }}
              </template>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { searchPartner, addPartner, delPartner, editPartner, resetPassword } from '@/api/vm'
export default {
  data() {
    return {
      tableData: [],
      totalCount: 0,
      totalPage: 0,
      search: {
        name: '',
        pageIndex: 1,
        pageSize: 10
      },
      addForm: {
        name: '', // 合作商名字
        account: '', // 账号
        password: '', // 密码 必须
        ratio: '', // 分成比例
        contact: '', // 联系人
        phone: '', // 联系电话
        mobile: '' //  手机号
      },
      editForm: {
        name: '',
        ratio: '',
        contact: '',
        phone: '',
        mobile: ''
      },
      partnerInfo: [],
      addShowDialog: false,
      editDialog: false,
      partnerInfoDialog: false,
      addRules: {
        name: [{ required: true, message: '请输入', trigger: 'change' }],
        account: [{ required: true, message: '请输入', trigger: 'change' }],
        password: [{ required: true, message: '请输入', trigger: 'change' }],
        ratio: [{ required: true, message: '请输入', trigger: 'change' }],
        contact: [{ required: true, message: '请输入', trigger: 'change' }],
        mobile: [
          { required: true, message: '请输入', trigger: 'change' },
          { validator: (rule, value, callback) => {
            const reg = /^\d{11}$/
            if (!reg.test(value)) {
              callback(new Error('请输入正确的手机号'))
            } else {
              callback()
            }
          }, trigger: 'change' }
        ]
      }
    }
  },
  async created() {
    await this.partnerSearch()
  },
  methods: {
    query() {
      this.search.pageIndex = 1
      this.partnerSearch()
    },
    async partnerSearch() {
      const { currentPageRecords, totalCount, totalPage } = await searchPartner({
        ...this.search
      })
      this.totalCount = parseInt(totalCount)
      this.totalPage = totalPage
      this.tableData = currentPageRecords
    },
    addPartner() {
      this.addShowDialog = true
    },
    addSubmit() {
      this.$refs.add.validate(async(pass) => {
        if (pass) {
          this.addForm.mobile = this.addForm.phone
          await addPartner(this.addForm)
          this.$message.success('新增合作商成功')
        }
        this.addClose()
        this.partnerSearch()
      })
    },
    addClose() {
      this.addShowDialog = false
      this.$refs.add.resetFields()
      this.addForm = {
        name: '', // 合作商名字
        account: '', // 账号
        password: '', // 密码 必须
        ratio: '', // 分成比例
        contact: '', // 联系人
        phone: '', // 联系电话
        mobile: '' //  手机号
      }
    },
    async resetPwd(id) {
      this.$confirm('确定要重置合作商密码吗？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        center: true,
        type: 'error'
      }).then(async() => {
        await resetPassword(id)
        this.$message({
          type: 'success',
          message: '重置成功!'
        })
      })
    },
    showPartnerInfo(row) {
      this.partnerInfo = row
      this.partnerInfoDialog = true
    },
    editPartner(row) {
      this.partnerInfo = row
      this.editForm = {
        name: row.name,
        ratio: row.ratio,
        contact: row.contact,
        phone: row.phone,
        mobile: row.mobile
      }
      this.editDialog = true
    },
    async delPartner(id) {
      this.$confirm('您确定删除吗？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await delPartner(id)
        this.partnerSearch()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      })
    },
    async editSubmit() {
      this.editForm.phone = this.editForm.mobile
      await editPartner({ ...this.editForm, id: this.partnerInfo.id })
      this.$message.success('修改成功')
      this.editClose()
      this.partnerSearch()
    },
    editClose() {
      this.editDialog = false
      this.$refs.edit.resetFields()
      this.editForm = {
        name: '',
        ratio: '',
        contact: '',
        phone: '',
        mobile: ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/common.scss'
</style>
